<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SVG 教程1</title>
</head>
<body>
  <h1> hello SVG</h1>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" troke-width="2" fill="red" >
      <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
    </circle>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="50" y="20" width="100" height="150" style="fill:rgb(0,0,255);stroke-width:5;stroke:orange;fill-opacity:0.1;stroke-opacity:0.5;" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="50" y="20" width="150" height="150" style="fill:rgb(0,0,255);stroke-width:5;stroke:orange;opacity:0.5;" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="150" cy="80" rx="100" ry="50" style="fill:yello;stroke-width:5;stroke:orange;opacity:0.5;" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="140" cy="100" rx="120" ry="30" style="fill:yellow" />
    <ellipse cx="140" cy="80" rx="100" ry="25" style="fill:lime" />
    <ellipse cx="140" cy="60" rx="80" ry="20" style="fill:purple" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="120" cy="100" rx="120" ry="30" style="fill:yellow" />
    <ellipse cx="120" cy="100" rx="80" ry="20" style="fill:lime" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="150" y1="100" x2="120" y2="30" style="stroke:rgb(255,0,0);stroke-width:2" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="200,10 200,190 160,120 180,50" style="fill:green;stroke:rgb(255,0,0);stroke-width:2;fill-rule:nonzero;" />
  </svg>
</body>
</html>